window.onload = function() {
    //兼容低版本IE
    if(!document.getElementsByClassName) {      //如果document.getElementsByClassName方法不存在，加自己实现的方法
        document.getElementsByClassName = function(cls) {       //cls是class简写
            var ret = [];       //定义一个空数组
            var els = document.getElementsByTagName('*');       //获取所有的标签

            for(var i=0, len= els.length; i< len; i++) {     //遍历这些元素
                if(els[i].className === cls                             // 'aaa'
                    || els[i].className.indexOf(cls + '') >=0           // 'aaa '
                    || els[i].className.indexOf('' + cls + '') >=0      // ' aaa '
                    || els[i].className.indexOf( '' + cls) >=0  ) {     // ' aaa'
                    ret.push(els[i]);
                }
            }
            return ret;
        }
    }

    var cartTable = document.getElementById('cartTable');
    var tr = cartTable.children[1].rows;                                    //获取所有的行，rows是表格元素特有的属性，存放节点所有tr元素
    var checkInputs = document.getElementsByClassName('check');             //选框
    var checkAllInputs = document.getElementsByClassName('check-all');      //全选框
    var selectedTotal = document.getElementById('selectedTotal');
    var priceTotal = document.getElementById('priceTotal');

    var selected = document.getElementById('selected');
    var foot = document.getElementById('foot');
    var selectedViewList = document.getElementById('selectedViewList');

    var deleteAll = document.getElementById('deleteAll');


    //计算
    function getTotal() {
        var seleted = 0;    //选中商品个数
        var price = 0;      //价格
        var HTMLstr = '';
        for(var i=0, len=tr.length; i<len; i++) {
            if(tr[i].getElementsByTagName('input')[0].checked) {
                tr[i].className = 'on';
                seleted += parseInt( tr[i].getElementsByTagName('input')[1].value );
                price += parseFloat( tr[i].cells[4].innerHTML );        //innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML
                HTMLstr += '<div><img src=" ' + tr[i].getElementsByTagName('img')[0].src + ' " ><span class="del" index=" '+ i +' " >取消选择</span></div>';
            }else{
                tr[i].className = ' ';
            }
        }
        selectedTotal.innerHTML = seleted;
        priceTotal.innerHTML = price.toFixed(2);        //toFixed(num) 方法可把 Number 四舍五入为指定小数位数的数字
        selectedViewList.innerHTML = HTMLstr;

        if(seleted == 0) {
            foot.className = 'foot'
        }

    }

    //小计
    function getSubTotal(tr) {
        var tds = tr.cells;
        var price = parseFloat(tds[2].innerHTML);
        var count = parseInt(tr.getElementsByTagName('input')[1].value);
        var SubTotal = parseFloat( price*count );
        tds[4].innerHTML = SubTotal.toFixed(2);
    }

    for(var i=0, len=checkInputs.length; i<len; i++) {
        checkInputs[i].onclick = function() {
            if(this.className === 'check-all check') {
                for(var j=0; j<checkInputs.length; j++) {
                    checkInputs[j].checked = this.checked;
                }
            }
            if(this.checked == false) {
                for(var k=0; k<checkAllInputs.length; k++) {
                    checkAllInputs[k].checked = false;
                }
            }
            getTotal();    
        }
    }

    selected.onclick = function() {
        if(foot.className == 'foot') {
            if(selectedTotal.innerHTML != 0) {
                foot.className = 'foot show';
            }
        }else{
            foot.className = 'foot';
        }
    }

    selectedViewList.onclick = function(e) {
        // console.log(e);
        // if(e) {
        //     e = e;
        // }else{
        //     e = window.event;       //window.event代表着事件对象的状态,只有在事件发生时生效。如鼠标、键盘等事件被触发时这个对象才存在。window.event这只在IE下是这样的
        // }
        e = e || window.event;      //代码缩减,用逻辑 '||'  或运算符
        var el = e.srcElement;
        if(el.className == 'del') {
            var index = el.getAttribute('index');   //getAttribute() 方法返回指定属性名的属性值
            var input = tr[index].getElementsByTagName('input')[0];
            input.checked = false;
            input.onclick();
        }
    }

    for(var i=0; i<tr.length; i++) {
        tr[i].onclick = function(e) {
            e = e || window.event;
            var el = e.srcElement;
            var cls = el.className;
            var input = this.getElementsByTagName('input')[1];
            var val = parseInt(input.value);    //转化成整数
            var reduce = this.getElementsByTagName('span')[1]
            switch (cls) {
                case 'add' :
                    input.value = val + 1;
                    reduce.innerHTML = '-';
                    getSubTotal(this);
                    break;
                case 'reduce' :
                    if( val > 1 ) {
                        input.value = val - 1;
                    }
                    if( val <= 1 ) {
                        reduce.innerHTML = '';
                    }
                    getSubTotal(this);
                    break;
                case 'delete' :
                    var conf = confirm('确定要删除吗？');
                    if(conf) {
                        this.parentNode.removeChild(this);      //removeChild() 方法指定元素的某个指定的子节点。
                    }
                    break;
                default :
                    break;
            }
            getTotal();
        }
        tr[i].getElementsByTagName('input')[1].onkeyup = function() {
            var val = parseInt(this.value);
            var tr = this.parentNode.parentNode;    //this.parentNode是指input的父节点td，this.parentNode.parentNode是td的父节点tr
            var reduce = tr.getElementsByTagName('span')[1];
            if(isNaN(val) || val <1) {  //判断val是否为NaN值
                var val = 1;
            }
                this.value = val;
            if( val <= 1) {
                reduce.innerHTML = ''
            }
            getSubTotal(tr);    
            getTotal();
        }
    }

    deleteAll.onclick = function() {
        if(selectedTotal.innerHTML != '0') {
            var conf = confirm('确定删除吗？');
            if(conf) {
                for(var i=0; i<tr.length; i++) {
                    var input = tr[i].getElementsByTagName('input')[0];
                    if(input.checked){
                        tr[i].parentNode.removeChild(tr[i]);
                        i--;
                    }
                }
            }
        }

    }

    checkAllInputs[0].checked =true;
    checkAllInputs[0].onclick();

}